<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品信息管理</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
</head>
<body>
	<script src="../static/js/utils.js"></script>
	<script type="text/javascript">
		layui.use([ 'layer', 'form', 'jquery', 'table', 'upload' ], function() {
			var layer = layui.layer;//声明对话框组件
			var form = layui.form;//声明表单组件
			var $ = layui.jquery;//声明jquery组件
			var table = layui.table;//声明table组件
			var upload = layui.upload;

			//文件上传
			upload.render({
				elem : '#upload-btn', //绑定元素
				url : '/goods/uploadImage', //上传接口
				done : function(res) {
					//上传完毕回调
					layer.msg('上传成功');
				},
				error : function() {
					//请求异常回调
					layer.msg('上传失败');
				}
			});

			//数据表格
			table.render({
				elem : '#dg',
				url : '../goods/listPage', //数据接口
				page : true, //开启分页
				id : 'dataTable',
				cols : [ [ //表头
				{
					field : 'gid',
					title : '商品编号',
					type : 'checkbox'
				}, {
					field : 'images',
					title : '图片',
					width : 300,
					templet : '#imageTpl',
					style : 'height:100px',
					align: "center"
				}, {
					field : 'gname',
					title : '商品名',
					width : 300
				}, {
					field : 'price',
					title : '单价',
					width : 80
				}, {
					field : 'quantity',
					title : '库存量',
					width : 80
				}, {
					field : 'gdesc',
					title : '描述',
					width : 500
				}, {
					field : 'cname',
					title : '类别',
					width : 80
				}, {
					field : 'cname',
					title : '操作',
					width : 100,
					toolbar : '#barDemo',
				} ] ],

				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					for ( var index in res.data) {
						var goods = res.data[index];
						goods.cname = goods.category.cname;
						//console.log(goods);
					}

					return {
						"code" : res.code, //解析接口状态
						"msg" : res.msg, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.data
					//解析数据列表
					};
				}
			});

			

			//监听表格行工具栏
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'edit') {
					//填充表单,填充数据
					fillSelect($,'/category/list', '#category-select-edit','cname','cid',data.category.cid);
					//修改对话框
					layer.open({
						title : '修改',
						content : $('#edit-dialog').html(),
						type : 1,
					});
					console.log(data.category.cid);

					form.val('edit-form', {
						'gid' : data.gid,
						'gname' : data.gname,
						'price' : data.price,
						'quantity' : data.quantity,
						'gdesc' : data.gdesc

					})
					//手动给选择框赋值
					//$("#category-select-edit").find("option[value='"+data.category.cid+"']").attr("selected",true);
					//提交表单修改，关闭添加对话框
					form.on('submit(edit-submit)', function(data) {
						$.post('../goods/update', data.field, function(flag) {
							if (flag) {
								table.reload('dataTable', {});//刷新表格
								layer.msg('修改成功');
								layer.closeAll('page');//关闭当前弹出对话框
							} else {
								layer.msg('修改失败');
							}
						})

						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				}
			})

			//添加按钮
			$('#add-btn').click(function() {
				//弹出对话框
				layer.open({
					content : $('#add-dialog').html(),
					title : '添加商品',
					type : 1
				});
				//填充商品类别的下拉框
				fillSelect($,'/category/list', '#category-select','cname','cid');

				//提交表单，关闭添加对话框
				form.on('submit(add-submit)', function(data) {
					//console.log(data.field)//当前容器的全部表单字段，名值对形式:{name,value}
					$.post('../goods/insert', data.field, function(flag) {

						console.log(type(flag));
						console.log(flag);
						if (flag) {
							layer.msg('添加成功');
						} else {
							layer.msg('添加失败');
						}

					})
				})
				return false;//阻止表单跳转。如果需要跳转，去掉本段
			})

			//查询按钮
			$('#search-btn').click(function() {
				//执行重载
				table.reload('dataTable', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						gname : $('#gname').val()
					}
				});
			})

			//删除按钮
			$("#remove-btn").click(function() {
				var checkStatus = table.checkStatus('dataTable');
				var gids = [];
				for ( let i in checkStatus.data) {
					gids.push(checkStatus.data[i].gid);

				}

				$.post('../goods/delete', {
					'gids' : gids
				}, function(flag) {
					if (flag) {
						table.reload('dataTable', {});
						layer.msg("删除成功");
					} else {
						layer.msg("删除失败");
					}
				});
			});

		})
	</script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i> 
			编辑
		</a>
	</script>
	<!-- 头部工具栏 -->
	<div class="demoTable">
		搜索商品名
		<div class="layui-inline">
			<input class="layui-input" name="gname" id="gname" autocomplete="off">
		</div>
		<button id="search-btn" class="layui-btn">
			<i class="layui-icon layui-icon-search"></i> 查询
		</button>
		<button id="add-btn" class="layui-btn layui-btn-warm">
			<i class="layui-icon layui-icon-addition"></i> 添加
		</button>
		<button id="remove-btn" class="layui-btn layui-btn-danger">
			<i class="layui-icon layui-icon-delete"></i> 删除
		</button>
		<button id="upload-btn" type="button" class="layui-btn">
			<i class="layui-icon layui-icon-upload"></i>上传图片
		</button>

	</div>
	<table id="dg" lay-filter="test"></table>

	<!-- 添加商品对话框 -->
	<script type="text/html" id="add-dialog">
	<form class="layui-form" method="post">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="gname" required lay-verify="required"
					placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品单价</label>
			<div class="layui-input-inline">
				<input type="text" name="price" required
					lay-verify="required|number" placeholder="请输入商品单价"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品库存</label>
			<div class="layui-input-inline">
				<input type="text" name="quantity" required
					lay-verify="required|number" placeholder="请输入商品单价"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品描述</label>
			<div class="layui-input-inline">
				<textarea name="gdesc" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品类别</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="category-select" name="cid" lay-verify="required">
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add-submit">提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	</script>

	<!-- 修改商品对话框 -->
	<script type="text/html" id="edit-dialog">
	<form class="layui-form" method="post" lay-filter="edit-form">
		<input type="hidden" name="gid"/>
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="gname" required lay-verify="required"
					placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品单价</label>
			<div class="layui-input-inline">
				<input type="text" name="price" required
					lay-verify="required|number" placeholder="请输入商品单价"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品库存</label>
			<div class="layui-input-inline">
				<input type="text" name="quantity" required
					lay-verify="required|number" placeholder="请输入商品单价"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品描述</label>
			<div class="layui-input-inline">
				<textarea name="gdesc" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品类别</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="category-select-edit" name="cid" lay-verify="required">
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="edit-submit">提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	</script>

	<!-- 表格图片模板 -->
	<script type="text/html" id="imageTpl">
  		<img src="../res/goods/images/{{d.images}}" style="height:100px"/>
	</script>
	
</body>
</html>